<template>
    <div class="formdelist formdelist_a">
        <a-form-model layout="vertical" :model="config">
            <a-form-model-item :label="i18n('screenChart','大屏图表组件')">
                <rx-input-button v-model="config.screenChart" @click="selectChart"></rx-input-button>
            </a-form-model-item>
            <a-form-model-item :label="$ti18('rxList.title','标题')">
                <a-input  v-model="config.name"></a-input>
            </a-form-model-item>
        </a-form-model>
        <a-tabs default-active-key="1" class="treedeflist" v-if="source=='dynamic'">
            <a-tab-pane key="1">
                <span slot="tab"> {{ i18n('form.receiveData', '接收数据配置') }} </span>
                <a-form-model :model="config.receive">
                    <a-form-model-item :label="$comi18('formDef.queryParamSource', '查询参数来源')">
                        <a-select
                            default-value="url"
                            v-model="config.receive.type"
                            :options="sourceAry"
                            :getPopupContainer="(p) => p.parentNode"
                            :allowClear="true"
                        >
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="$comi18('formDef.deployeEvent', '发布事件组件')"
                                       v-if="config.receive.type == 'event'">
                        <a-select
                            v-model="config.receive.publishComponent"
                            :options="publishComponent"
                            allowClear
                            @change="changeComponent"
                            :getPopupContainer="(p) => p.parentNode"
                        >
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="$comi18('listDef.primary', '参数映射')">
                        <a-button-group class="abuttonhert">
                            <a-button class="abutton" @click="addParams">
                                <i class="iconjia iconfont"></i>
                            </a-button>
                            <a-button class="abutton" @click="removeSelect()">
                                <i class="icontrash iconfont"></i>
                            </a-button>

                            <a-button class="abutton" @click="moveUp()">
                                <i class="iconshang iconfont"></i>
                            </a-button>

                            <a-button class="abutton" @click="moveDown()">
                                <i class="iconxia iconfont"></i>
                            </a-button>
                        </a-button-group>
                        <a-table
                            :dataSource="config.receive.mapping"
                            :pagination="false"
                            :rowSelection="receiveRowSelection"
                            rowKey="idx_"
                            :bordered="true"
                        >
                            <a-table-column :title="$comi18('rxDialog.paramName', '参数名称')" dataIndex="name">
                                <template slot-scope="text, record">
                                    <a-select v-model="record.name"
                                              :getPopupContainer="(p) => p.parentNode"
                                              :options="paramsDef"
                                              :allowClear="true">
                                    </a-select>
                                </template>
                            </a-table-column>
                            <a-table-column :title="$comi18('formDef.valueSource', '值来源')" dataIndex="valueSource">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.valueSource"
                                        :options="valueSourceDef"
                                        :getPopupContainer="(p) => p.parentNode"
                                        :allowClear="true"
                                    >
                                    </a-select>
                                </template>
                            </a-table-column>
                            <a-table-column :title="i18n('list.paramValue','参数值')"  dataIndex="valueDef">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.valueDef"
                                        :options="componentParamsDef"
                                        :allowClear="true"
                                        :getPopupContainer="(p) => p.parentNode"
                                        v-if=" config.receive.type == 'event' && record.valueSource == 'param'"
                                    >
                                    </a-select>
                                    <a-select
                                        v-model="record.valueDef"
                                        :options="params"
                                        :allowClear="true"
                                        :getPopupContainer="(p) => p.parentNode"
                                        v-if="config.receive.type == 'url' && record.valueSource == 'param'"
                                    >
                                    </a-select>
                                    <a-input v-model="record.valueDef"
                                             v-if="record.valueSource == 'fixedVar'"></a-input>
                                    <a-input-group v-if="record.valueSource == 'script'" compact>
                                        <div style="display: flex">
                                            <a-input style="flex:1;margin-right: 0px" v-model="record.valueDef"/>
                                            <a-button @click="openScriptQuery(record)">...</a-button>
                                        </div>
                                    </a-input-group>
                                    <a-select
                                        v-if="record.valueSource == 'constantVar'"
                                        v-model="record.valueDef"
                                        :options="constantField"
                                        allowClear
                                        :getPopupContainer="(p) => p.parentNode"
                                    ></a-select>
                                </template>
                            </a-table-column>
                        </a-table>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="2">
                <span slot="tab"> {{i18n('form.publishData','发布数据配置')}}</span>
                <div class="selectPublish">
                    <div>{{$comi18('listDef.unitParams', '组件参数')}}</div>
                    <a-select
                        :getPopupContainer="(p) => p.parentNode"
                        v-model="publishValues"
                        mode="multiple"
                        :placeholder="$ti18('rxDecorator.select','请选择')"
                        style="width: 100%"
                        @change="publishChange"
                    >
                        <a-select-option v-for="item in publishParams" :key="item.label" :value="item.value">
                            {{ item.label }}
                        </a-select-option>
                    </a-select>
                </div>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
import ComponentDef from "@/views/modules/form/core/formComponent/ComponentDef";
import {GridMixin, RxInputButton, Util, Dialog} from "@lowcode/jpaas-common-lib";
import ScreenChartDialog from "@/views/modules/form/core/dialog/ScreenChartDialog.vue"
import ScreenChartManageApi from "@/api/screen/screenChartManage.js"

export default {
    name: "ScreenChartDef",
    mixins: [GridMixin, ComponentDef],
    components: {
        RxInputButton
    },
    computed: {
        receiveRowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    data() {
        return {
            config: {
                alias:Util.randomId(),
                name:this.i18n('screenChart','大屏图表组件')+Util.randomId(),
                screenChart: "",
                receive: {
                    type: 'event',
                    publishComponent: '',
                    mapping: [],
                },
                //发布参数
                publish:{
                    paramMapping:[]
                }
            },
            valueSourceDef: [
                {value: 'param', label: this.$ti18('rxForm.param', '参数传入')},
                {value: 'fixedVar', label: this.$ti18('rxForm.fixedVar', '固定值')},
                {value: 'script', label: this.$ti18('rxForm.script', '脚本')},
                {value: 'constantVar', label: this.$ti18('rxForm.constantVar', '常量')},
            ],
            componentParamsDef: [],
            publishComponent: [],
            selectedRowKeys: [],
            publishParams: [],
            paramsDef: [],
            sourceAry: [
                {value: 'url', label: this.listI18n('form.incomParam', '来自传入参数')},
                {value: 'event', label: this.$comi18('formDef.fromComponent', '来自组件')},
            ],
            publishValues:[],
            source:""
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        listI18n(name, text, key) {
            return this.$ti18(name, text, "formComponent", key);
        },
        init() {
            this.paramsDef = [];
            if (this.conf) {
                this.config = this.conf;
                this.changeComponent(this.config.receive.publishComponent)
               if(this.config.screenChart){
                   let screenChart=JSON.parse( this.config.screenChart);
                   this.getScreenChart(screenChart.value);
               }
                if (this.config.publish) {
                    this.publishValues=[];
                    for (var i = 0; i < this.config.publish.paramMapping.length; i++) {
                        this.publishValues.push(this.config.publish.paramMapping[i].key);
                    }
                }
            }
            this.publishComponent = this.getPublishOptions()
        },
        selectChart(vm) {
            let self=this;
            let conf = {
                component: ScreenChartDialog,
                curVm: this,
                widthHeight: ['1024px', '600px'],
                title: "大屏图表",
                data: {},
                zIndex:9999
            }
            Util.open(conf, function (action,data) {
                if(action!='ok')return;
                vm.setVal(data.id, data.name);
                self.config.screenChart=JSON.stringify({value:data.id,text:this.$i18(data.name)});
                self.$emit('dragclick', self.config, self.index, self.type);
                self.getScreenChart(data.id);
            });
        },
        changeComponent(val) {
            if (!val) {
                return;
            }
            if (this.config.alias == val) {
                this.config.receive.publishComponent = ''
                this.$notification.warning({
                    message: this.$ti18('rxMsa.tipsInfo', '提示信息'),
                    description: this.i18n('msa.changeComTips', '发布事件组件不能选择自己!')
                })
                return
            }
            this.componentParamsDef = this.getPubParams(val)
        },
        initPublishParams(config) {
            this.publishParams=[];
            //维度
            if(config.dimensions){
                for (var i = 0; i < config.dimensions.length; i++) {
                    var obj=config.dimensions[i];
                    this.publishParams.push({
                        label:obj.fieldLabel,
                        value: obj.tableName + "." + obj.fieldName
                    });
                }
            }
            //度量
            if(config.measures){
                for (var i = 0; i < config.measures.length; i++) {
                    var obj=config.measures[i];
                    this.publishParams.push({
                        label:obj.fieldLabel,
                        value: obj.tableName + "." + obj.fieldName
                    });
                }
            }
        },
        publishChange(value){
            this.config.publish.paramMapping=[];
            for (let i = 0; i < value.length; i++) {
                let param=this.publishParams.find(item => item.value ==value[i] );
                this.config.publish.paramMapping.push({
                    key:param.value,
                    label:param.label
                })
            }
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        addParams() {
            this.config.receive.mapping.push({idx_: Util.randomId(), name: '', valueSource: '', valueDef: ''})
        },
        moveUp() {
            this.toUp(this.config.receive.mapping, this.selectedRowKeys)
        },
        moveDown() {
            this.toDown(this.config.receive.mapping, this.selectedRowKeys)
        },
        removeSelect() {
            this.removeRows(this.config.receive.mapping, this.selectedRowKeys)
        },
        openScriptQuery(record) {
            Dialog.openScripttextDialog(
                {
                    curVm: this,
                    widthHeight: ['800px', '600px'],
                    zIndex: 9999,
                    data: {script: record.valueDef},
                },
                function (self, data) {
                    record.valueDef = data
                }
            )
        },
        getScreenChart(id){
            ScreenChartManageApi.getScreenChart(id).then(res=>{
                if(res.success && res.data.screenDataModel){
                    if(!res.data.config){
                        return;
                    }
                    let dataSources=JSON.parse(res.data.config).dataSources;
                    this.source=dataSources.source;
                    //动态数据
                    if(dataSources.source!="dynamic"){
                        return;
                    }
                    let modelConfig=JSON.parse(res.data.screenDataModel.modelConfig);
                    var params = modelConfig.params;
                    for (let i = 0; i < params.length; i++) {
                        let param = params[i];
                        for (let j = 0; j < param.fields.length; j++) {
                            this.paramsDef.push({
                                label: param.fields[j].fieldLabel,
                                value: param.tableName + "." + param.fields[j].fieldName,
                                comparison: param.fields[j].comparison
                            });
                        }
                    }
                    this.initPublishParams(dataSources);
                }
            });
        }
    },
    watch: {},
}
</script>

<style scoped>
.formdelist {
    padding: 0 10px;
}
</style>